<style lang="less" rel="stylesheet/less" type="text/less">
    .api-views{
        padding-top: 20px;

	 }
    .look-views{
           margin-top: 20px;
		}
	.row-page{
		margin-top: 20px;
	}
	.ivu-modal-body{
         font-size: 16px;
       	.ivu-form-item-label{
             font-size: 16px;
    }
	}

</style>

<template>
	<div
		v-if="!is_showLook"
		class="api-views">
		<Button
			v-if="!is_showCreate"
			type="primary"
			size="large"
			@click="toCreate"
		>
			+绑定Bundle ID</Button>
		<Button
			v-else
			type="primary"
			size="large"
			@click="toIndex"
		>
			查看Bundle ID</Button>
		<Table
			v-if="!is_showCreate"
			:columns="titleName"
			:data="data"
			class="look-views"
			stripe/>

		<bundle-id v-else/>
		<Modal
			v-model="show_modal"
			title="BUNDLE详情&&状态修改"
			@on-cancel="hide_Modal">
			<EDIT
				v-if="show_modal"
				:bundle_detail="bundle_detail"
				@update="edit_ok"
			/>

			<div slot="footer"/>
		</Modal>
	</button>
	</div>
	<div
		v-else
		class="api-views">
		<Button
			type="primary"
			size="large"
			@click="toIndex"
		>
			查看Bundle ID</Button>
		<LOOK
			:logs-list="logsList"
			class="look-views"
		/>

		<!-- 分页组件 -->
		<Row
			type="flex"
			class="row-page"
			justify="center">
			<Page
				:total="logsTotal"
				:current="page_info.page"
				:page-size="page_info.per_page"
				:page-size-opts="[2,5,10]"
				placement="top"
				show-sizer
				show-total
				@on-change="pageChange"
				@on-page-size-change="perPageChange"
			/>
		</Row>
	</div>
</template>
<script>
import qs from 'qs';
import BUNDLEID from './bundle-id.vue';
import LOOK from './look.vue';
import EDIT from './edit.vue';

export default {
    	components: {
		'bundle-id': BUNDLEID,
		LOOK,
		EDIT,
	},
	data() {
		return {
			logsList: [],
			bundle_detail: {},
			logsTotal: null,
			is_showCreate: false,
			is_showLook: false,
			requestId: null,
			logsPages: null,
			token: '',
			show_modal: false,
			page_info: {
				// 分页信息
				page: 1,
				per_page: 10,

			},
			search_info: {

				page: 1,
				per_page: 10,
			},
			titleName: [
				{
					title: '应用名称',
					key: 'name',
				},
				{
					title: 'Bundle ID',
					key: 'bundle_id',
				},
				{
					title: '平台',
					key: 'platform',
				},
				{
					title: '状态',
					key: 'status',
				},
				{
					title: '操作',
					width: '300px',
					render: (h, { row }) => (
						<div>
							 <Button name="index__edit" size="small" onClick={() => { this.editAPI(row); }} type="primary">编辑</Button>
                           	<Button name="index__look" size="small" style="margin-left: 8px" onClick={() => { this.lookAPI(row.id); }} type="primary">查看bundle调用记录</Button>
							<Button name="index__delete" size="small" style="margin-left: 8px" onClick={() => { this.deleteAPI(row.id); }} type="error">删除</Button>
						</div>
					),
				},
			],
			data: [],
		};
	},
	created() {
		this.token = sessionStorage.getItem('token');

		this.APILIST();
	},
	methods: {
                 		/**
       * 页码改变
       * @param  {string} page {当前页码}
       * @return {undefined}
       */
		pageChange(page) {
			this.search_info.page = page;
			this.search_info.per_page = this.page_info.per_page;
			this.pageAPI(this.search_info);
		},

		/**
       * 每页显示数改变
       * @param  {string} size {当前每页显示数}
       * @return {undefined}
       */
		perPageChange(size) {
			this.search_info.per_page = size;
			this.page_info.per_page = size;
			this.pageAPI(this.page_info);
		},

		hide_Modal() {
			this.bundle_detail = null;
		},


		// 删除单条bundle
		deleteAPI(id) {
			this.$Modal.confirm({

				title: '温馨提示', // '温馨提示',
				content: '删除之后将无法恢复，确定吗?', // '删除之后将无法恢复，确定吗？',
				onOk: () => {
					this.$Spin.show();
					const deleteData = {
						id,
						token: this.token,
					};
					this.axios.post(`${window.location.origin}/admin/v1/bundle/delete`, qs.stringify(deleteData))
						.then(({ data }) => {
							if (data.code === 200) {
								this.$Message.success('删除成功');
								this.APILIST();
							} else if (data.code === 7003) {
								this.$Message.error({
									content: 'token验证失败,过期或token错误,请重新登录',
									duration: 5,
									closable: true,

								});
								this.$router.push({
									path: '/login',
								});
							} else {
								throw new Error(data.error);
							}
						})
		            .catch((err) => {
							this.$Message.error({
								content: err.message || err.statusText,
								duration: 5,
								closable: true,
							});
						});
					this.$Spin.hide();
            		},
				onCancel: () => {},

			});
		},
		// bundles列表
		APILIST() {
			this.$Spin.show();
			this.axios.post(`${window.location.origin}/admin/v1/bundles`, qs.stringify({
				token: this.token,
			}))
				.then(({ data }) => {
					if (data.code === 200) {
						this.data = data.bundles;
					} else if (data.code === 7003) {
						this.$Message.error({
							content: 'token验证失败,过期或token错误,请重新登录',
							duration: 5,
							closable: true,

						});
						this.$router.push({
							path: '/login',
						});
					} else {
						throw new Error(data.error);
					}
				})
		            .catch((err) => {
					this.$Message.error({
						content: err.message || err.statusText,
						duration: 5,
						closable: true,
					});
				});
			this.$Spin.hide();
		},
		toCreate() {
			this.is_showCreate = true;
		},
		toIndex() {
			this.is_showCreate = false;
			this.is_showLook = false;
			this.APILIST();
		},
		// 请求日志
		lookAPI(id) {
			this.$Spin.show();

			this.requestId = id;

			const lookData = {
				token: this.token,
				id: this.requestId,
				page_enable: 1,
				page: this.page_info.page,
				per_page: this.page_info.per_page,

			};

			this.axios.post(`${window.location.origin}/admin/v1/bundle/logs`, qs.stringify(lookData))
				.then(({ data }) => {
					if (data.code === 200) {
						this.logsList = data.logs;
						this.logsPages = data.pages;
					 this.is_showLook = true;
					 this.logsTotal = data.total;
					} else if (data.code === 7003) {
						this.$Message.error({
							content: 'token验证失败,过期或token错误,请重新登录',
							duration: 5,
							closable: true,

						});
						this.$router.push({
							path: '/login',
						});
					} else {
						throw new Error(data.error);
					}
				})
				.catch((err) => {
					this.$Message.error({
						content: err.message || err.statusText,
						duration: 5,
						closable: true,
					});
				});
			this.$Spin.hide();
		},

		//   分页请求日志
		pageAPI(param) {
			this.$Spin.show();
			const lookData = {
				token: this.token,
				id: this.requestId,
			   page_enable: 1,
				page: param.page,
				per_page: param.per_page,

			};

			this.axios.post(`${window.location.origin}/admin/v1/bundle/logs`, qs.stringify(lookData))
				.then(({ data }) => {
					if (data.code === 200) {
						this.logsList = data.logs;
						this.logsPages = data.pages;
		         	this.is_showLook = true;
					} else if (data.code === 7003) {
						this.$Message.error({
							content: 'token验证失败,过期或token错误,请重新登录',
							duration: 5,
							closable: true,

						});
						this.$router.push({
							path: '/login',
						});
					} else {
						throw new Error(data.error);
					}
				})
				.catch((err) => {
					this.$Message.error({
						content: err.message || err.statusText,
						duration: 5,
						closable: true,
					});
				});
			this.$Spin.hide();
		},

		 // 请求点击编辑时的详细内容
		editAPI(detail) {
			 this.bundle_detail = detail;

	       this.show_modal = true;
		},
		// 修改成功回调
		edit_ok(id, param) {
			this.$Spin.show();
			const lookData = {
				token: this.token,
				id,
				status: param,

			};

			this.axios.post(`${window.location.origin}/admin/v1/bundle/status/update`, qs.stringify(lookData))
				.then(({ data }) => {
					if (data.code === 200) {
						this.show_modal = false;
						this.$Message.success('更新成功');
						this.APILIST();
					} else if (data.code === 7003) {
						this.$Message.error({
							content: 'token验证失败,过期或token错误,请重新登录',
							duration: 5,
							closable: true,

						});
						this.$router.push({
							path: '/login',
						});
					} else {
						throw new Error(data.error);
					}
				})
				.catch((err) => {
					this.$Message.error({
						content: err.message || err.statusText,
						duration: 5,
						closable: true,
					});
				});
			this.$Spin.hide();
		},
	},
};
</script>
